<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生列表-学生信息管理系统</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
    <style>
        .wrap {
            width: 90%;
            margin: 0 auto;
        }
        
        #template {
            display: none;
        }
        
        #mask {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            left: 0;
            top: 0;
            display: none;
        }
        
        #pop {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffff;
            width: 600px;
            padding: 20px 50px;
            border-radius: 10px;
            display: none;
        }
        
        #quit {
            float: right;
            cursor: pointer;
            font-size: 15px;
        }
        
        #quit:hover {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="wrap">

        <h2>学生信息管理系统</h2>
        <h4 style="font-size: 15px;">
            <span id="data-username" style="font-size: 15px;"></span>
            <span id="data-type" style="font-size: 15px;"></span> ：您好!
            <span id="quit">退出登录</span>
        </h4>
        <hr>
        <button class="btn btn-primary" id="addStudent" style="float:right;">+ 新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
    <div id="pop">
        <h2 id="smallTitle">添加学生</h2>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-man"  checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female">女
                </label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" onclick="WdatePicker()" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>
            </div>

            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/citys.js"></script>
        <script src="lib/datepicker/wdatepicker.js"></script>

        <script>
            let address = "http://10.35.170.159:82";
            // let address = "http://192.168.1.102:82";
            let template = $("#template");
            //登录验证
            let userInfo = sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo=", "");
            if (!userInfo) {
                location.href = `${address}/register.html`
            }
            //展示用户信息及退出登录功能
            $("#data-username").html((JSON.parse(userInfo)[0].username))
            $("#data-type").html((Number(JSON.parse(userInfo)[0].usertype) ? "同学" : "老师"))
                // console.log(((Number(JSON.parse(userInfo)[0].usertype) ? "同学" : "老师")))
                //退出登录
            $("#quit").click(function() {
                    sessionStorage.removeItem("userInfo");
                    document.cookie = "userInfo=xxx;expires=" + new Date("1970-01-01");
                    location.href = `${address}/redister`
                })
                //键盘按下事件
            window.onkeydown = function(event) {
                    if (event.keycode === 13) {
                        $("#submit").click()
                    }
                    if (event.keycode === 27) {
                        $("#cancel").click()
                    }
                }
                //编辑
            $(".data-edit").click(function(event) {
                    $("#pop").find("#smallTitle").html("编辑学生")
                    let _this = event.target
                    $("#mask").fadeIn();
                    $("#pop").fadeIn();
                    $("#data-name").focus();
                    //当前编辑的内容是弹出层里的内容
                    $("#data-name").val($(_this).closest("tr").find(".data-name").html());
                    $("#data-age").val($(_this).closest("tr").find(".data-age").html());
                    console.log($(_this).closest("tr").find(".data-sex").html())
                    if ($(_this).closest("tr").find(".data-sex").html() === "女") {
                        console.log($("#pop").find("#data-female").prop("checked", true))
                        $("#pop").find("#data-female").prop("checked", true)
                    }
                    if ($(_this).closest("tr").find(".data-sex").html() === "男") {
                        console.log($("#pop").find("#data-man").prop("checked", true))
                        $("#pop").find("#data-man").prop("checked", true)
                    }
                    $("#data-city").val($("#province").val() + $("#city").val() + $("#area").val());
                    $("#data-joinDate").val($(_this).closest("tr").find(".data-joinDate").html())
                        //确认绑定事件
                    $("#submit").click(function() {
                        if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {
                            console.log($(_this).closest("tr").find(".data-id").html())
                            $.ajax({
                                url: `${address}/updateStudent`,
                                data: {
                                    id: $(_this).closest("tr").find(".data-id").html(),
                                    name: $("#data-name").val(),
                                    age: $("#data-age").val(),
                                    sex: $("#data-female")[0].checked ? 0 : 1,
                                    joinDate: $("#data-joinDate").val(),
                                    city: $("#province").val() + $("#city").val() + $("#area").val(),
                                },
                                success(data) {
                                    if (data === "success") {
                                        // alert("添加成功")
                                        //页面前进(后退),go()方法只有一个参数，可以是整数、负数。如果是正数，就前进。负数就是后退。
                                        history.go(0)
                                    } else {
                                        alert("添加失败")
                                        console.log(data)
                                    }
                                }
                            })
                        }
                    })
                })
                //弹出层的显示
            $("#addStudent").click(function() {
                    $("#mask").fadeIn();
                    $("#pop").fadeIn();
                    $("#data-name").focus()
                        //将里面的内容清空
                    $("#data-name").val("");
                    $("#data-age").val("");
                    $("#data-female").val("");
                    $("#data-city").val("");
                    $("#data-joinDate").val("")
                    $("#pop").find("#smallTitle").html("新增学生")
                        //新增
                    $("#submit").click(function() {

                        if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {
                            console.log($("#data-femal"))
                            $.ajax({
                                url: `${address}/addStudent`,
                                data: {
                                    name: $("#data-name").val(),
                                    age: $("#data-age").val(),
                                    sex: $("#data-female")[0].checked ? 0 : 1,
                                    joinDate: $("#data-joinDate").val(),
                                    city: $("#province").val() + $("#city").val() + $("#area").val(),
                                },
                                success(data) {
                                    if (data === "success") {
                                        // alert("添加成功")
                                        //页面前进(后退),go()方法只有一个参数，可以是整数、负数。如果是正数，就前进。负数就是后退。
                                        history.go(0)
                                    } else {
                                        alert("添加失败")
                                    }
                                }
                            })
                        }

                    })
                })
                //弹出层的隐藏
            $("#cancel").click(function() {
                    $("#mask").fadeOut();
                    $("#pop").fadeOut();
                })
                //删除
            template.find(".data-delete").click(function() {
                    let baba = $(this).closest("tr");
                    if (confirm("真的要删除吗？"))
                        $.ajax({
                            url: `${address}/deleteStudent`,
                            data: {
                                id: $(this).closest("tr").find(".data-id").html()
                            },
                            success(data) {
                                if (data === "success") {
                                    alert("删除成功")
                                    history.go(0)
                                } else {
                                    alert("删除失败")
                                    console.log(data)
                                }
                            }
                        })
                })
                //克隆
            $.ajax({
                url: `${address}/getStudent`,
                success(data) {
                    let studentList = JSON.parse(data);
                    let tbody = $(".data-wrap");
                    studentList.forEach(item => {
                        let newItem = template.clone(true).attr("id", "");
                        newItem.find(".data-id").html(item.id)
                        newItem.find(".data-name").html(item.name)
                        newItem.find(".data-age").html(item.age)
                        newItem.find(".data-sex").html(Number(item.sex) ? "男" : "女")
                        newItem.find(".data-city").html(item.city)
                        newItem.find(".data-joinDate").html(item.joinDate)
                        newItem.appendTo(tbody)
                    })
                }

            })
        </script>
</body>

</html>